<template>
	<view class="page">
		<view class="flex">
			<input class="input" type="text" @keyup.enter="search" v-model="inputValue" placeholder="请输入快递单号尾号" />
			<button class="add_btn btn" @click="search">查找</button>
		</view>
		<view class="list">
			<view v-if="inputValue && items.length ==0"> 暂无记录 </view>
			<view class="flex item" v-for="(item, index) in items" :key="index">
				<view class="title flex1">
					<view>单号:{{ item.value }} </view>
					<view>分区:{{ item.fenqu }} </view>
					<view>创建时间:{{ formatDate(item.id) }} </view>
					<view>领取时间:{{ item.t2 ? formatDate(item.t2) : '暂未领取'}} </view>
				</view>
				<button v-if="!item.t2" class="del_btn btn" @click="dolinqu(item.id)">领取</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',

				items: [],
				list: [],
				arr: [],
			};
		},
		onShow() {
			this.load()
		},
		methods: {
			  
			load() {
				var _this = this
				uni.getStorage({
					key: 'records',
					success: function(res) {
						console.log('从本地读取的数据为：', res.data);
						_this.list = JSON.parse(res.data)
					}
				});
				uni.getStorage({
					key: 'items',
					success: function(res) {
						console.log('从本地读取的数据为：', res.data);
						_this.arr = JSON.parse(res.data)
					}
				});
			},
			search() {
				var value = this.inputValue.trim()
				if (!value) return uni.showToast({
					title: '输入为空',
					icon: 'none'
				});
				this.items = this.list.filter(e => e.value.includes(value))
				this.items = this.items.map(e => {
					e.fenqu = this.arr.filter(f => f.id == e.fid)[0].value
					return e
				})
			},
			dolinqu(id) {
				this.list = this.list.map(e => {
					if (e.id == id) e.t2 = Date.now()
					return e
				})
				uni.showToast({
					title: '领取成功'
				});
				this.items = this.list.filter(e => e.value.includes(value))
				this.save()
			},
			save() {
				uni.setStorage({
					key: 'records',
					data: JSON.stringify(this.list),
					success: function() {
						console.log('数据存储成功');
						uni.showToast({
							title: '领取成功'
						});
					}
				});
			},
			
			formatDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
			
				return `${year}-${month}-${day}`;
			},
			
		}
	};
</script>
<style>
	.input {
		flex: 1;
		border: 1px solid #ccc;
		border-radius: 5px;
		height: 28px;
		padding-left: 10px;
		margin-right: 5px;
		font-size: 12px;
	}

	.btn {
		width: 100px;
		height: 30px;
		font-size: 12px;
	}

	.list {
		height: calc(100vh - 70px);
		overflow: auto;
		padding: 10px 0;
	}

	.item {
		padding: 4px 10px;
		background-color: #f1f1f1;
		margin: 2px 0;
	}

	.del_btn {
		width: 60px;
		background-color: crimson;
		color: #fff;
	}
</style>